<template>
  <el-dialog
    :title="title"
    width="38%"
    :visible="dialogflag"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :destroy-on-close="true"
  >
    <el-form
      ref="elForm"
      :model="formData"
      :rules="rules"
      size="medium"
      label-width="100px"
      label-position="right"
      :style="{ width: '100%' }"
      class="dialogForm"
    >
      <!-- 第一行 -->
      <el-form-item label="标准中文名" prop="standardChName">
        <el-input
         :disabled="condition===0"
          v-model="formData.standardChName"
          placeholder="请输入标准中文名"
          clearable
          :style="{ width: '100%' }"
        ></el-input>
      </el-form-item>
      <!-- 第二行 -->
      <el-form-item label="字段类型" prop="standardType">
        <el-select
         :disabled="condition===0"
          v-model="formData.standardType"
          placeholder="请选择字段类型"
          clearable
          :style="{ width: '100%' }"
          @change="changedSelect"
        >
          <el-option
            v-for="(item, index) in fieldOptions"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <!-- 第三行 -->
      <el-form-item label="标准英文名" prop="standardName">
        <el-input
          :disabled="condition===0"
          v-model="formData.standardName"
          placeholder="请输入字段标识"
          maxlength="255"
          clearable
          :style="{ width: '100%' }"
          show-word-limit
        >
        </el-input>
      </el-form-item>
      <!-- 动态第四行---长度 -->
      <el-form-item
        label="长度"
        v-if="
          formData.standardType == 'Int' ||
          formData.standardType == 'Float' ||
          formData.standardType == 'Double' ||
          formData.standardType == 'String' ||
          formData.standardType == 'Currency' ||
          formData.standardType == 'Password' ||
          formData.standardType == 'Data' ||
          formData.standardType == 'Barcode' ||
          formData.standardType == 'HTML' ||
          formData.standardType == 'Markdown Editor' ||
          formData.standardType == 'Code'
        "
      >
        <el-input
          v-model="formData.fieldLength"
          placeholder="请输入长度"
          clearable
          oninput="value=value.replace(/[^\d]/g,'')"
          :style="{ width: '100%' }"
        ></el-input>
      </el-form-item>
      <!-- 动态第五行---精度 -->
      <el-form-item
        label="精度"
        v-if="
          formData.standardType == 'Float' ||
          formData.standardType == 'Double' ||
          formData.standardType == 'Currency'
        "
      >
        <el-select
          v-model="formData.fieldAccuracy"
          placeholder="请选择精度"
          clearable
          :style="{ width: '100%' }"
        >
          <el-option
            v-for="(item, index) in precisionList"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <!-- 第四行 -->
      <el-form-item>
        <el-checkbox-group v-model="listValueCheck" size="medium">
          <el-checkbox
            v-for="(item, index) in checkboxOptions"
            :key="index"
            :label="item.value"
            :disabled="item.disabled"
            >{{ item.label }}</el-checkbox
          >
        </el-checkbox-group>
      </el-form-item>
      <!-- 动态--录入方式 -->
      <el-form-item
        label="录入方式"
        v-if="this.formData.standardType == 'Datetime'"
        class="newcheckout"
      >
        <el-radio-group v-model="formData.dateType">
          <el-radio :label="0">手动录入</el-radio>
          <el-radio :label="1">系统时间</el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- 动态如果是系统时间 -->
      <el-form-item label="格式" v-if="this.formData.dateType == 1">
        <el-select
          v-model="entryMethodModel"
          placeholder="请选择格式"
          clearable
          :style="{ width: '100%' }"
          @change="changedFormat"
        >
          <el-option
            v-for="item in formatList"
            :key="item.label"
            :label="item.value"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <!-- 动态---取值 -->
      <el-row
        v-if="this.formData.standardType === 'Select'"
        style="margin-bottom: 20px"
      >
        <!-- 动态添加/删除输入框 -->
        <el-col :span="4"> <div style="margin-left: 50px">取值</div></el-col>
        <el-col :span="20"
          ><div class="selectBox">
            <el-form-item
              v-for="(item, index) in formData.selectList"
              :key="item.index"
              :prop="'selectList.' + index + '.value'"
              :rules="{
                required: true,
                message: '内容不能为空',
                trigger: 'blur',
              }"
            >
              <div>
                <el-input
                  v-model="item.value"
                  :style="{ width: '92%' }"
                ></el-input>
                <i
                  class="el-icon-remove-outline inconstyle"
                  @click.prevent="remove(item)"
                ></i>
              </div>
            </el-form-item>
            <i
              class="el-icon-circle-plus-outline inconstyle addinconstyle"
              @click="add"
              >添加</i
            >
          </div></el-col
        >
      </el-row>

      <!-- 动态行---默认值 -->
      <el-form-item
        label="默认值"
        v-if="
          !(
            formData.standardType == 'Link' ||
            formData.standardType == 'Table' ||
            formData.standardType == 'Table MultiSelect' ||
            formData.standardType == 'Dynamic Link'
          )
        "
      >
        <el-input
          v-model="formData.defaultValue"
          placeholder="请输入业务含义"
          :autosize="{ minRows: 3, maxRows: 3 }"
          type="textarea"
          :style="{ width: '100%' }"
        ></el-input>
      </el-form-item>
      <!-- 第五行 -->
      <el-form-item label="描述">
        <el-input
          v-model="formData.description"
          placeholder="请输入业务含义"
          :autosize="{ minRows: 3, maxRows: 3 }"
          type="textarea"
          :style="{ width: '100%' }"
        ></el-input>
      </el-form-item>
      <!-- 第六行 -->
      <el-form-item label="业务含义">
        <el-input
          v-model="formData.comment"
          placeholder="请输入业务含义"
          :autosize="{ minRows: 3, maxRows: 3 }"
          type="textarea"
          :style="{ width: '100%' }"
        ></el-input>
      </el-form-item>
      <!-- 第七行 -->
      <el-form-item label="参考标准文件">
        <el-select
          v-model="formData.fileId"
          placeholder="请选择参考标准文件"
          clearable
          :style="{ width: '100%' }"
        >
          <el-option
            v-for="(item, index) in fileIdOptions"
            :key="index"
            :label="item.dirName"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div class="dialog-footer">
      <el-button size="medium" @click="handleClose" class="bootonclose"
        >取 消</el-button
      >
      <el-button
        size="medium"
        type="primary"
        @click="handleOk"
        class="bootonok"
      >
        保存
      </el-button>
    </div>
    <img alt="" class="lodingBar" />
  </el-dialog>
</template>

<script>
import {
  getFieldType,
  queryFileList,
  getPrecisionNum,
  getTimeFormatEnums,
} from "@/api/dataStandard/standardManagement.js";

export default {
  name: "Logdialog",
  props: {
    dialogflag: {
      type: Boolean,
    },
    dataObj: {
      type: Object,
    },
    chooseDataList: {
      type: Array,
    },
    metadataId: {
      type: String,
    },
    inputStatus: {
      type: String,
    },
    catalogueId: {
      type: String,
    },
    tableData: {
      type: Array,
    },
  },
  data() {
    const validatorName = (rule, value, callback) => {
      // var reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[A-Za-z_][A-Za-z_0-9]{0,}$/;
      var reg = /^(?!_)[a-zA-Z0-9_\u4e00-\u9fa5]+$/;
      var regnum = /^[0-9].*$/;
      if (!value) {
        return callback("请输入标准中文名");
      } else {
        // setTimeout(() => {
        if (!reg.test(value)) {
          callback(
            new Error("只含有汉字、数字、字母、下划线,不能以下划线开头")
          );
        } else if (regnum.test(value)) {
          callback(new Error("不能以数字开头!"));
        } else {
          callback();
        }
        // }, 100);
      }
    };
    const validatorLabel = (rule, value, callback) => {
      // var reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[A-Za-z_][A-Za-z_0-9]{0,}$/;
      var reg = /^[a-zA-Z0-9_]+$/;
      var regnum = /^[0-9].*$/;
      var regline = /^([a-zA-Z])[a-z0-9]*$/i;
      // var regNum=/^.{1,255}$/;
      if (!value) {
        return callback("请输入标准英文名");
      } else {
        // setTimeout(() => {
        if (!reg.test(value)) {
          callback(new Error("只能由字母、数字和下划线组成 "));
        } else if (regnum.test(value)) {
          callback(new Error("不能以数字开头!"));
        } else if (!regline.test(value)) {
          callback(new Error("只能由字母开头!"));
        } else {
          callback();
        }
        // }, 100);
      }
    };
    return {
      //录入的格式
      entryMethodModel: "",
      //状态
      condition:2,// 0--查看  1--编辑  2---新建
      formData: {
        standardChName: "", //标准中文名
        standardType: "", //选择 1--select 2-Link  3-Table 4-Table MultiSelect 5-Dlink
        standardName: "", //标准英文名
        fileId: "", //参考文件的id
        comment: "", //业务含义
        catalogueId: "", //标准集id
        fieldLength: "", //长度
        fieldAccuracy: "", //精度
        defaultValue: "", //默认值
        description: "", //描述
        chooseData: "", //选择的数据
        choose: 0, //1-Select,2-Link，3-Table, 4-Table MultiSelect,5-DLink
        dateType: 0, //时间类型,0手动时间,1系统时间
        inGlobalSearch: 0, //关键字搜索 0--否 1--是
        isUnique: 0, //唯一  0--否 1--是
        notNull: 0, //必填 0--否  1--是
        nonNegative: 0, //非负数
        hideDays: 0, //隐藏天
        hideSeconds: 0, //隐藏秒
        isAutoIncrement: 0, //自增长,0 否 / 1 是
           selectList: [
          {
            value: "",
          },
        ],
      },
      listValueCheck: [], //多选框选择的东西
      precisionList: [], //精度的选择
    
      rules: {
        standardChName: [
          {
            required: true,
            validator: validatorName,
            trigger: "blur",
          },
        ],
        standardType: [
          {
            required: true,
            message: "请输入元数据标识",
            trigger: "change",
          },
        ],
        standardName: [
          {
            required: true,
            validator: validatorLabel,
            trigger: "blur",
          },
        ],
      },
      //请求回来的格式list
      formatList: [],
      //字段类型的枚举list
      fieldOptions: [],
      //参考文件的list
      fileIdOptions: [],
      //多选框选项列
      checkboxOptions: [
        {
          label: "必填",
          value: "notNull",
        },
        {
          label: "唯一",
          value: "isUnique",
        },
        {
          label: "关键字搜索",
          value: "inGlobalSearch",
        },
      ],

      dialogVisible: false,
      title: "新建标准",
      //字段名是否重复
      formDataisShowOne: 0, //0--没有重复  1--有重复
      //字段标识是否重复
      formDataisShowTwo: 0, //0--没有重复  1--有重复
    };
  },
  mounted() {
    console.log(
      this.tableData,
      this.dataObj,
      "子组件接收的数据"
    );
    console.log(this.tableData, "  this.tableData");
    this.formData.catalogueId = this.catalogueId;        
   if(this.dataObj.row){
     this.condition=this.dataObj.condition;
    this.formData=this.dataObj.row;
         if(this.dataObj.flag=="examine"){
        this.title="查看"
    }
    if(this.dataObj.flag=="edit"){
        this.title="编辑"
    }
    if(this.formData.standardType==="Datetime"){
        this.entryMethodModel=this.formData.chooseData;
    }
    if(this.formData.standardType==="Select"){
        this.formData.selectList=JSON.parse(this.formData.chooseData)
    }
    //必填
    if (this.formData.notNull) {
          this.listValueCheck.push("notNull");
        }
        //是否关键字搜索
        if (this.formData.inGlobalSearch) {
          this.listValueCheck.push("inGlobalSearch");
        }
        //隐藏天
        if (this.formData.hideDays) {
          this.listValueCheck.push("hideDays");
        }
        //隐藏秒
        if (this.formData.hideSeconds) {
          this.listValueCheck.push("hideSeconds");
        }
        if (this.formData.nonNegative) {
          this.listValueCheck.push("nonNegative");
        }
        //是否自增长
        if (this.formData.isAutoIncrement) {
          this.listValueCheck.push("isAutoIncrement");
        }
        //唯一
        if (this.formData.isUnique) {
          this.listValueCheck.push("isUnique");
        }
   }
    //获取字段类型枚举
    this.getFieldTypeName();
    //获取参考标准文件
    this.getFileListInfo();
    //获取精度
    this.getPrecision();
    //获取时间格式枚举
    this.getFormat();
    //一进来先去请求一下就是多选框的数据
    this.changedSelect();
  },
  methods: {
    // 保存
    handleOk() {
      this.$refs.elForm.validate((valid) => {
        if (valid) {
          if (this.listValueCheck) {
            //关键字搜索
            if (this.listValueCheck.indexOf("inGlobalSearch") != -1) {
              this.formData.inGlobalSearch = 1;
            } else {
              this.formData.inGlobalSearch = 0;
            }
            // 唯一
            if (this.listValueCheck.indexOf("isUnique") != -1) {
              this.formData.isUnique = 1;
            } else {
              this.formData.isUnique = 0;
            }
            // 必填
            if (this.listValueCheck.indexOf("notNull") != -1) {
              this.formData.notNull = 1;
            } else {
              this.formData.notNull = 0;
            }
            // 非负数
            if (this.listValueCheck.indexOf("nonNegative") != -1) {
              this.formData.nonNegative = 1;
            } else {
              this.formData.nonNegative = 0;
            }
            // 隐藏天
            if (this.listValueCheck.indexOf("hideDays") != -1) {
              this.formData.hideDays = 1;
            } else {
              this.formData.hideDays = 0;
            }
            // 隐藏秒
            if (this.listValueCheck.indexOf("hideSeconds") != -1) {
              this.formData.hideSeconds = 1;
            } else {
              this.formData.hideSeconds = 0;
            } // 自增
            if (this.listValueCheck.indexOf("isAutoIncrement") != -1) {
              this.formData.isAutoIncrement = 1;
            } else {
              this.formData.isAutoIncrement = 0;
            }
          }
          if (this.formData.standardType == "Select") {
            this.formData.choose = 1;
            this.formData.chooseData=JSON.stringify(this.formData.selectList);
          } else if (this.formData.standardType == "Link") {
            this.formData.choose = 2;
          } else if (this.formData.standardType == "Table") {
            this.formData.choose = 3;
          } else if (this.formData.standardType == "Table MultiSelect") {
            this.formData.choose = 4;
          } else if (this.formData.standardType == "Dynamic Link") {
            this.formData.choose = 5;
          } else {
            this.formData.choose = 0;
            if(this.formData.standardType == "Datetime"){
                 this.formData.chooseData=this.entryMethodModel;
            }
          }
          console.log(
            this.title, this.formData,this.condition,'传给父组件的值'
          );
          delete this.formData.selectList
          this.$emit("closedia", this.title, this.formData,this.condition);
        }
      });
      // debugger;
    },
    //关闭弹窗
    handleClose() {
      this.$emit("closedia");
    },
    //动态选择字段类型
    changedSelect(val) {
      if (this.formData.standardType == "Int") {
        this.checkboxOptions = [
          {
            label: "必填",
            value: "notNull",
          },
          {
            label: "唯一",
            value: "isUnique",
          },
          {
            label: "关键字搜索",
            value: "inGlobalSearch",
          },
          {
            label: "非负数",
            value: "nonNegative",
          },
          {
            label: "自增",
            value: "isAutoIncrement",
          },
        ];
      } else if (
        this.formData.standardType == "Float" ||
        this.formData.standardType == "Double" ||
        this.formData.standardType == "Currency"
      ) {
        this.checkboxOptions = [
          {
            label: "必填",
            value: "notNull",
          },
          {
            label: "唯一",
            value: "isUnique",
          },
          {
            label: "关键字搜索",
            value: "inGlobalSearch",
          },
          {
            label: "非负数",
            value: "nonNegative",
          },
        ];
      } else if (
        this.formData.standardType == "String" ||
        this.formData.standardType == "Date"
      ) {
        this.checkboxOptions = [
          {
            label: "必填",
            value: "notNull",
          },
          {
            label: "唯一",
            value: "isUnique",
          },
          {
            label: "关键字搜索",
            value: "inGlobalSearch",
          },
        ];
      } else if (
        this.formData.standardType == "Boolean" ||
        this.formData.standardType == "Datetime" ||
        this.formData.standardType == "Link" ||
        this.formData.standardType == "Long Text" ||
        this.formData.standardType == "Percent" ||
        this.formData.standardType == "Select" ||
        this.formData.standardType == "Samll Text" ||
        this.formData.standardType == "Time" ||
        this.formData.standardType == "Data" ||
        this.formData.standardType == "Check" ||
        this.formData.standardType == "Barcode" ||
        this.formData.standardType == "Code" ||
        this.formData.standardType == "Color" ||
        this.formData.standardType == "Dynamic Link" ||
        this.formData.standardType == "HTML"
      ) {
        //没有非负数
        this.checkboxOptions = [
          {
            label: "必填",
            value: "notNull",
          },
          {
            label: "唯一",
            value: "isUnique",
          },
          {
            label: "关键字搜索",
            value: "inGlobalSearch",
          },
        ];
      } else if (
        this.formData.standardType == "Attach" ||
        this.formData.standardType == "Attach Image" ||
        this.formData.standardType == "Rating" ||
        this.formData.standardType == "Table" ||
        this.formData.standardType == "Table MultiSelect" ||
        this.formData.standardType == "Button" ||
        this.formData.standardType == "Text Editor" ||
        this.formData.standardType == "Signature" ||
        this.formData.standardType == "Geolocation" ||
        this.formData.standardType == "Markdown Editor" ||
        this.formData.standardType == "icon" ||
        this.formData.standardType == "Password"
      ) {
        //没有关键字搜索、非负数
        this.checkboxOptions = [
          {
            label: "必填",
            value: "notNull",
          },
          {
            label: "唯一",
            value: "isUnique",
          },
        ];
      } else if (this.formData.standardType == "Duration") {
        //没有非负数 有隐藏天 隐藏秒
        this.checkboxOptions = [
          {
            label: "必填",
            value: "notNull",
          },
          {
            label: "唯一",
            value: "isUnique",
          },
          {
            label: "关键字搜索",
            value: "inGlobalSearch",
          },
          {
            label: "隐藏天",
            value: "hideDays",
          },
          {
            label: "隐藏秒",
            value: "hideSeconds",
          },
        ];
      }
      //   else if (this.formData.standardType == "Dynamic Link") {
      //     //灭有关键字、非负数
      //     this.checkboxOptions = [
      //       {
      //         label: "必填",
      //         value: "notNull",
      //       },
      //       {
      //         label: "唯一",
      //         value: "isUnique",
      //       },
      //       {
      //         label: "关键字搜索",
      //         value: "inGlobalSearch",
      //       },
      //     ];
      //   }
    },
    //获取字段类型的枚举
    getFieldTypeName() {
      getFieldType()
        .then((response) => {
          this.fieldOptions = response.data;
        })
        .catch((err) => {
          console.log(err);
          // this.$message.error(err.message);
        });
    },
    //获取参考标准文件列表
    getFileListInfo() {
      queryFileList()
        .then((response) => {
          this.fileIdOptions = response.data;
        })
        .catch((err) => {
          console.log(err);
          // this.$message.error(err.message);
        });
    },
    //获取精度
    getPrecision() {
      getPrecisionNum()
        .then((response) => {
          this.precisionList = response.data;
        })
        .catch((err) => {
          // this.$message.error(err.message);
          console.log(err);
        });
    },
    //请求方式
    getFormat() {
      getTimeFormatEnums()
        .then((response) => {
          this.formatList = response.data;
        })
        .catch((err) => {
          console.log(err);
          // this.$message.error(err.message);
        });
    },
    //选择的时间格式
    changedFormat(val) {
      console.log(val, this.formData, "changedFormat");
    },
    //删除
    remove(item) {
      var index = this.formData.selectList.indexOf(item);
      if (index !== -1) {
        this.formData.selectList.splice(index, 1);
      }
    },
    //添加
    add() {
      this.formData.selectList.push({
        value: "",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/mixin.scss";
@import "~@/assets/styles/variables.scss";
::v-deep .el-dialog__body {
  padding: 0px 20px;
  max-height: 850px;
  overflow: auto;
}
::v-deep .el-dialog__header {
  padding: 0;
  height: 70px;
  line-height: 70px;
  background-color: $labelColor;
  position: relative;
}
::v-deep .el-dialog__title {
  color: #fff;
  margin-left: 30px;
  font-size: 18px;
}
::v-deep .el-dialog__headerbtn {
  top: 50%;
  right: 20px;
  transform: translate(0, -50%);
  z-index: 2;
}
::v-deep .el-dialog__close {
  border: 1px solid #fff;
  color: #fff;
  border-radius: 50%;
}
::v-deep .el-checkbox__input .is-checked {
  color: $labelColor !important;
}
::v-deep .is-checked .el-checkbox__inner {
  background-color: $labelColor !important;
}
::v-deep .is-checked .el-checkbox__inner::after {
  height: 13px;
  width: 7px;
  border-color: #fff;
  top: -1px;
}

.lodingBar {
  position: absolute;
  height: 70px;
  top: 0;
  right: 0;
  z-index: 1;
}
.dialogForm {
  padding: 25px 40px;
}
.el-form-item {
  width: 100%;
  margin-bottom: 18px;
}
.inconstyle {
  font-size: 12px;
  color: $labelColor;
  width: 8%;
}
.addDownstyle {
  margin-bottom: 15px !important;
}
// .addinconstyle{
// margin-left: 100px;
// }
.selectBox {
  width: 100%;
  height: auto;
  max-height: 150px;
  overflow-y: scroll;
  overflow-x: hidden;
}
.dialog-footer {
  text-align: center;
  padding-bottom: 20px;
}
.bootonclose {
  width: 122px;
  height: 40px;
  background-color: #fff;
  border: 1px solid #e8eaec;
  border-radius: 4px;
  font-size: 16px;
  color: $labelColor;
}
.bootonok {
  width: 122px;
  height: 40px;
  background-color: $labelColor;
  border-radius: 4px;
  color: #fff;
  margin-left: 20px;
  font-size: 16px;
}
::v-deep .newcheckout .el-radio__inner {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
::v-deep .newcheckout .el-radio__input.is-checked .el-radio__inner {
  background-color: #fff !important;
  border-color: $labelColor !important ;
}
::v-deep .newcheckout .el-radio__input.is-checked .el-radio__inner:hover {
  border-color: $labelColor !important ;
}
::v-deep .newcheckout .el-radio__inner::after {
  width: 10px;
  height: 10px;
  background: $labelColor !important;
}
::v-deep .newcheckout .el-radio__input.is-checked + .el-radio__label {
  color: $labelColor !important;
}
// class="labelStyle">{{ it
// class="modelnameStyle">
// class="nameStyle">名称:<
//从其他元数据选择
.firstValueStyle span {
  float: left;
}
.firstValueStyle .labelStyle {
  display: inline-block;
  width: 40%;
}
.firstValueStyle .modelnameStyle {
  display: inline-block;
  width: 35%;
  white-space: nowrap; /*内容超宽后禁止换行显示*/
  overflow: hidden; /*超出部分隐藏*/
  text-overflow: ellipsis; /*文字超出部分以省略号显示*/
}
.firstValueStyle .nameStyle {
  display: inline-block;
  width: 25%;
  white-space: nowrap; /*内容超宽后禁止换行显示*/
  overflow: hidden; /*超出部分隐藏*/
  text-overflow: ellipsis; /*文字超出部分以省略号显示*/
}
</style>
<style scoped>
/deep/.el-checkbox {
  margin-right: 14px;
}
/deep/.selectBox .el-form-item__content {
  margin-left: 0px !important;
}
</style>
